<template>
  <div class="home">
    <div>基础案例</div>
    <!-- 从vuex中获取state数据 -->
    <div>{{$store.state.num}}</div>
    <!-- 基于计算属性进行处理 -->
    <div>{{num}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
import { mapState } from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      count: 10
    }
  },
  computed: mapState({
    // 1. 基本用法
    // num (state) {
    //   // 这里的state其实store中整个状态
    //   return state.num
    // }
    // 2. 此处可以使用箭头函数（这里的this不需要我们处理，mapState内部会进行处理）
    // num: state => state.num
    // 3. 上述第2步骤用法可以进一步简化(引号中的num值指的是state中属性名称)
    // num: 'num',
    // 4. 状态state中的数据和data中的数据可以结合使用
    // 如果使用了vuex，组件内是否还有可能有数据呢？有可能（只有需要共享的数据才会放到vuex的状态里面；但是，组件独有的数据（仅仅在当前组件需要的数据），也可以放到组件的data里面）
    num (state) {
      return state.num + this.count
    }
  }),
  methods: {
    handleClick () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateNum', 1)
    }
  }
}
</script>
